import React,{useState,useEffect} from 'react'
import {useNavigate,useLocation } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import style from './style.module.scss'
import {AppOutline,MessageOutline, ShopbagOutline,UserOutline,} from 'antd-mobile-icons'
export default function Footer() {
    const [active,setActive] = useState('/')
    
    const navigate = useNavigate();
 
    const location = useLocation();
   
    useEffect(()=>{
      setActive(location.pathname)
    },[])
    //切换面板的回调
    function changeTab(key){
        console.log(key);
        //修改active变量
        setActive(key)
        
        navigate(key)
    }
  return (
    <div className={style.footer} >
         <TabBar activeKey={active} onChange={changeTab}>
            <TabBar.Item icon={<AppOutline />} key={'/'} title={'首页'} />
            <TabBar.Item icon={<ShopbagOutline />} key={'/shop'} title={'商城'} />
            <TabBar.Item icon={<MessageOutline />} key={'/life'} title={'生活服务'} />
            <TabBar.Item icon={<UserOutline />} key={'/about'} title={'我的'} />
        </TabBar>
    </div>
  )
}
